<template>
    <div id="partTime">
        <!--后退-->
        <img class="back" src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <!--用户信息-->
        <div id="userInfo">
            <router-link to="/userCom" style="text-decoration:none;">
                <img style="width:3rem;height:3rem;border-radius:50%;" :src="showData.userModel.headPortrait" alt="">
            </router-link>
            <p style="font-size:0.9rem;">{{showData.userModel.nickName}}<img v-if="showData.userModel.sex==1" style="margin-left:0.3rem;height:0.8rem;width:0.8rem;"src="../../assets/homepage/male.png" alt=""><img v-if="showData.userModel.sex==2" style="margin-left:0.3rem;height:0.8rem;width:0.8rem;" src="../../assets/homepage/women.png" alt=""></p>
            <rate disabled :length="5" v-model="showData.userModel.totalStar"/>
        </div>
        <!--联系方式-->
        <div id="way">
           <div>
                <img style="width:2rem;height:2rem;" src="../../assets/homepage/call.png" alt="">
                <p @click="callphone()">电联</p>
            </div>
            <div>
                <p style="border-left:1px solid #9d9d9d;">
                <img style="width:2rem;height:2rem;" src="../../assets/homepage/msg.png" alt=""></p>
                <p @click="sendMsg">发短信</p>
            </div>
        </div>
        <div id="userDe">
            <div class="commodity">
                <div  class="title">
                    <p style="font-size:1rem;color:#2aa095;">{{showData.amount}}<span>￥</span></p> 
                    <p style="font-size:0.8rem;color:#8e8e8e;">{{turnTime(showData.initiatorTime)}} <span>发布</span></p>
                    <p style="font-size:0.8rem;color:#8e8e8e;">{{showData.common1}}</p>
                </div>
                <div class="content">
                        <div class="conInfo">
                            <div style="width:60%;height:5rem;font-size:0.8rem;">
                                <p>{{showData.taskExplain}}</p>
                            </div>
                            <div class="gender"style="height:4.5rem;">
                                <div v-if="showData.allSum">
                                    <img src="../../assets/homepage/un.png" alt="">  
                                    <p style="font-size:0.8rem;margin-left:0.75rem;">{{showData.allSum}}/{{showData.allSum}} <span>人/天</span></p>
                                </div>
                                <div v-if="showData.womanSum">
                                    <img src="../../assets/homepage/boy.png" alt="">
                                    <p style="font-size:0.8rem;margin-left:0.75rem;">{{showData.womanSum}}/<span v-if="showData.manSum">{{Number(showData.manSum)+Number(showData.womanSum)}}</span><span v-if="!showData.manSum">{{showData.womanSum}}</span> <span>人/天</span></p>
                                </div>
                                <div v-if="showData.manSum">
                                    <img src="../../assets/homepage/gril.png" alt="">
                                    <p style="font-size:0.8rem;margin-left:0.75rem;">{{showData.manSum}}/<span v-if="showData.manSum">{{Number(showData.manSum)+Number(showData.womanSum)}}</span><span v-if="!showData.womanSum">{{showData.manSum}}</span> <span>人/天</span></p>
                                </div>
                                
                            </div>
                        </div>
                        
                        <div class="addressInfo">
                            <p>工作地点: <span>{{showData.taskLocation}}</span></p>
                            <p>工作时间: <span>{{showData.beginTime}} ~ {{showData.endTime}}</span></p>
                        </div>
                   
                </div>
                
                
            </div>
        </div>
        <!--发布-->
        <button id="join" @click="getTask">报名此兼职</button>
    </div>
</template>
<script>
import turnTime from '../../server/dataTime.js'
export default {
  data () {
    return {
        turnTime:turnTime,
        showData:{
            userModel:{
                headPortrait:undefined,
            }
        },
    }
  },
  created(){
     this.getDetailData()
  },
  methods:{
       getDetailData(){
          this.$api.getTaskDataDetail(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                  this.showData = res.data
              }
          })
      },
     //   任务报名
    getTask(){
         this.$api.getTask(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                    this.$router.push({
                        path: '/cueMsg',
                    })
                //   this.showData = res.data
              }
          })
    },
    callphone(){
        window.location.href = "tel:"+this.showData.common4;
    },
    sendMsg(){
        window.location.href = "tel:"+this.showData.common4;
    }
  }
}
</script>
<style>
#partTime .Rate__star[disabled][data-v-59a74259]{
    color:#efc20f!important;
}
#partTime .icon[data-v-59a74259]{
    width:1rem!important;
    height:1rem!important;
    margin:0!important;
}
#partTime .Rate__star{
    padding:0 0.25rem!important;
}
#partTime {
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/homepage/bg.png);
}
#partTime .back{
    height:0.75rem;
    width:0.4rem;
    margin:0.9rem 0.6rem;
}
#partTime #userInfo{
    margin:4vh auto 5vh;
    width:40%;
    text-align:center;
}
#partTime #userInfo img:nth-child(n+3){
    width:0.8rem;
    height:0.8rem
}
#partTime #way{
    width:70%;
    margin:0rem auto;
    display:flex;
    line-height:1.5rem;
    font-size:0.6rem;
    color:#9d9d9d
}
#partTime #way > div{
    width:50%;
    text-align:center;
}
#partTime #userDe{
    margin:6vh auto;
    width:93%;
    background:#fff;
    border-radius:13px;
    border:2px solid #c5ada0;
    padding:0.75rem;
}
#partTime #userDe .commodity{
    background:#ffffff;
    width:100%;
    height:15rem;
    border-radius:13px;
    padding:0.9rem 0.6rem;
}
#partTime #userDe .commodity .title{
  height:1rem;
  line-height:1rem;
  display:flex;
  justify-content:space-between;
}
#partTime #userDe .commodity .title p{
   font-size:0.8rem;
   color:#8e8e8e; 
}
#partTime #userDe .commodity .content {
    width:90%;
    margin:0.8rem auto;
}
#partTime #userDe .commodity .content .conInfo{
    display:flex;
    justify-content:space-between;
    margin:1rem 0;
}
#partTime #userDe .commodity .content .conInfo .gender div{
    height:2rem;
    line-height:2rem;
    display:flex;
}
#partTime #userDe .commodity .content .conInfo .gender  img{
    width:1.5rem;
    height:1.5rem;
}
#partTime #userDe .commodity .content .addressInfo{
    line-height:2.5rem;
    font-size:0.8rem;
}
#partTime #join{
    width:40%;
    height:2.5rem;
    margin:0 30%;
    background:#ffffff;
    border:1px solid #9d9d9d;
    font-size:0.8rem;
    color:#2aa095;
    border-radius:13px;
}
</style>
